<template>
  <div>
    <Row :gutter="10">
      <Col :md="24" :lg="8">
        <Row :gutter="10">
          <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
            <Card>
              <Row type="flex" class="user-infor">
                <Col span="8">
                  <Row class-name="made-child-con-middle" type="flex" align="middle">
                    <!--<img class="avator-img" :src="avatorPath" />-->
                    <Avatar
                      style="background-color: #3F51B5;font-size: 60px;width: 80px;height:80px;line-height: 80px;border-radius: 80px;"
                      icon="person"/>
                  </Row>
                </Col>
                <Col span="16" style="padding-left:6px;">
                  <Row class-name="made-child-con-middle" type="flex" align="middle">
                    <div>
                      <b class="card-user-infor-name">{{ userName }}</b>
                      <p>{{ roleNames }}</p>
                    </div>
                  </Row>
                </Col>
              </Row>
              <div class="line-gray"></div>
              <Row class="margin-top-8">
                <Col span="8"><p class="notwrap">上次登录时间:</p></Col>
                <Col span="16" class="padding-left-8">{{ lastLoginTime }}</Col>
              </Row>
              <!--<Row class="margin-top-8">
                <Col span="8"><p class="notwrap">上次登录地点:</p></Col>
                <Col span="16" class="padding-left-8">北京</Col>
              </Row>-->
            </Card>
          </Col>
        </Row>
      </Col>
      <Col :md="24" :lg="16">
        <Row :gutter="5">
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="user_created_count"
              :end-val="count.createUser"
              iconType="android-person-add"
              color="#2d8cf0"
              intro-text="访问记录数"
            ></info-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="visit_count"
              :end-val="count.visit"
              iconType="clipboard"
              color="#64d572"
              :iconSize="50"
              intro-text="工作记录"
            ></info-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="collection_count"
              :end-val="count.collection"
              iconType="cash"
              color="#ffd572"
              intro-text="电路管理"
            ></info-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <info-card
              id-name="transfer_count"
              :end-val="count.transfer"
              iconType="funnel"
              color="#f25e43"
              intro-text="光路衰减检测"
            ></info-card>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
import countUp from './components/countUp.vue';
import infoCard from './components/infoCard.vue';
export default {
  name: 'home',
  components: {
    countUp,
    infoCard
  },
  data () {
    return {
      count: {
        createUser: 496,
        visit: 3264,
        collection: 24389305,
        transfer: 39503498
      }
    }
  },
  computed: {
    userName () {
      return this.$store.state.user.name;
    },
    roleNames () {
      return this.$store.state.user.roleNames;
    },
    lastLoginTime () {
      return this.$store.state.user.lastLoginTime;
    }
  }
}
</script>

<style lang="less">
  @import './home';
  @import '../../assets/style/common';
</style>
